<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name=x5-orientation content=portrait>
    <meta name=screen-orientation content=portrait>
    <title>馆东证</title>
    <link rel="stylesheet" href="{SITE_URL}app/{$GLOBALS['TS_URL']['app']}/css/馆东证.css">
    <script type="text/javascript" src="{SITE_URL}public/js/rem.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/html2canvas.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/smatchScreen.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery.qrcode.min.js"></script>
    <link rel="stylesheet" href="{SITE_URL}public/font-awesome/css/font-awesome.min.css">
</head>
<body>
<!--画报-->
<div class="poster" data-id="poster">
    <div class="container" data-id="container">
        <div class="word-box" style="text-align: left;padding-left: 300px">
            <p>{$GLOBALS['TS_USER']['username']}</p>
            <p>编号：{$groupid}-{$GLOBALS['TS_USER']['userid']}</p>
            <p>所辖分馆：{$strGroup['groupname']}</p>
            <p>上岛时间：{php echo(date('Y-m-d',$strGroupUser['addtime']))}</p>
        </div>
    </div>
</div>
<!--操作按钮-->
<div class="download-image">
    <div class="button" data-bind="download">
        <img src="{SITE_URL}public/images/download.jpg" alt="图片" class="poster-image" data-id="image">
        <span style="padding: 20px">长按这里下载图片<i class="fa fa-download" aria-hidden="true"></i></span>
    </div>
</div>

<script>
  $(function () {
    // 初始化一屏幕的高度
    var clientHeight = document.documentElement.clientHeight;
    $("[data-id='poster']").css({height:clientHeight+'px'});
    // 缩放图片
    SmatchScreen($("[data-id='container']").get(0), 'v-v', 750, 1334, false, false);

    // 此处是生成图片
    window.onload=function(){
      var screenRate = clientHeight / 1334
      html2canvas($("[data-id='container']").get(0),{
        useCORS:true,
        width:750*screenRate,
        height:1334*screenRate
      }).then(canvas => {
        var imgUrl = canvas.toDataURL();
        $('[data-id="image"]').attr('src',imgUrl)
      });
    }
  })
</script>
</body>
</html>